<template>
	<view>
		<view class="out" v-if="!islogin">
			<view class="outinput">
				<uni-easyinput type="text" v-model="username" placeholder="请输入用户名" class="input"></uni-easyinput>
				<uni-easyinput type="password" v-model="pwd" placeholder="请输入密码" class="input"></uni-easyinput>
			</view>
			<button class="button" @click="login()">确认登录</button>
		</view>
		<view v-if="islogin">
			<text>您已成功登录!</text>
			<button type="default" plain="true" @click="back()">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				pwd: '',
				islogin: false
			}
		},

		onLoad() {

		},

		methods: {
			//返回到登录界面
			back(){
				this.islogin=!this.islogin;
			},
			//用户点击登录，调用这个函数
			login() {
				//用户点击登录，显示正在登录。。。
				uni.showLoading({
					title: "正在登录，请稍后...",
					mask: true //显示的时候用户不能进行其他操作
				});
				//发请求
				uni.request({
					url: "http://kamuzuki.top:8080/xms/resuser.action", //请求地址
					//参数
					data: {
						op: "login",
						username: this.username,
						pwd: this.pwd
					},
					//请求成功调用这个
					success: (res) => {

					},
					//失败调用这个
					fail: (res) => {
						//显示一个请求失败的提示
						uni.showToast({
							title: "请求失败！",
							icon: "error",
							mask: true
						});
					},
					//无论回调函数成功与否都调用这个
					complete: res => {
						uni.hideLoading(); //关闭加载图示
						if (res.data.code == 1) {
							//显示一个登录成功的提示
							uni.showToast({
								title: "登录成功！",
								icon: 'success',
								mask: true
							});
							this.islogin = true;
							//其他操作.....
						} else {
							//显示一个登录失败的提示
							uni.showToast({
								title: "登录失败！",
								icon: "error",
								mask: true
							});
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.out {
		height: 1500rpx;
		border: white solid 3rpx;

		.outinput {
			margin-top: 400rpx;

			.input {
				text-align: center;
				border-radius: 30rpx;
				width: 400rpx;
				height: 70rpx;
				margin-top: 70rpx;
				margin-left: 175rpx;
			}
		}

		.button {
			background-color: #41a863;
			margin-top: 140rpx;
			width: 400rpx;
		}

	}
</style>
